.clearfix:before,
.clearfix:after {
	display: table;
	content: '';
	clear: both;
}

.f-right {
	float: right;
}
.f-left {
	float: left;
}

.order-container {
	flex: 1;
	flex-direction: column;
	overflow: hidden;
	background: $page-color-base;
	height: 100vh;

	.order-nav {
		width: 750rpx;
		height: 80rpx;
		flex-direction: row;
		/* #ifndef APP-PLUS */
		white-space: nowrap;
		/* #endif */
		background: #fff;
		text-align: center;
		border-bottom: 2rpx solid $ns-border-color-gray;
		.uni-tab-item {
			/* #ifndef APP-PLUS */
			display: inline-block;
			/* #endif */
			flex-wrap: nowrap;
			padding-left: 24rpx;
			padding-right: 24rpx;
		}

		.uni-tab-item-title {
			color: #555;
			font-size: 30rpx;
			display: block;
			height: 76rpx;
			line-height: 76rpx;
			border-bottom: 2px solid #fff;
			padding: 0 10rpx;
			flex-wrap: nowrap;
			/* #ifndef APP-PLUS */
			white-space: nowrap;
			/* #endif */
		}

		.uni-tab-item-title-active {
			display: block;
			height: 76rpx;
			color: $base-color;
			border-bottom: 2px solid $base-color;
			padding: 0 10rpx;
		}
		::-webkit-scrollbar {
		  width: 0;
		  height: 0;
		  color: transparent;
		}
	}

	.swiper-box {
		height: calc(100% - 80rpx);
	}

	.order-list {
		height: 100%;

		.order-item {
			margin: 20rpx;
			border-radius: 8rpx;
			background: #fff;
			box-sizing: border-box;
			position: relative;

			.item-header {
				height: 70rpx;
				line-height: 70rpx;
				margin: 0 20rpx;
				border-bottom: 1px solid #f1f1f1;

				text {
					line-height: 70rpx;
					font-size: 28rpx;
				}
			}

			.item-body {
				margin: 0 20rpx;

				.order-goods-item {
					display: flex;
					box-sizing: border-box;
					border-top: 1px dashed #e5e5e5;
					padding: 20rpx 0;

					&:first-child {
						border-top: none;
					}

					.goods-img {
						width: 136rpx;
						height: 136rpx;
						margin-right: 20rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.goods-info {
						flex: 1;
						position: relative;

						.goods-name {
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
							line-height: 1.5;
							font-size: 28rpx;

							.gift-mark {
								display: inline-block;
								border-radius: 6rpx;
								background-color: $base-color;
								padding: 6rpx 20rpx;
								display: inline-block;
								font-size: $ns-font-size-sm;
								line-height: 1;
								color: #fff;
								margin-right: 6rpx;
							}
						}

						.text {
							font-size: 24rpx;
							color: #999;
							display: block;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}

				.order-goods-operating {
					padding-bottom: 20rpx;
					display: flex;

					& > view {
						&:first-child {
							text-align: left;
						}

						&:last-child {
							flex: 1;
							text-align: right;
						}

						.operating-btn {
							border-radius: 6rpx;
							border: 1px solid #e5e5e5;
							background-color: white;
							padding: 4rpx 20rpx;
							display: inline-block;
							margin-left: 20rpx;
						}
					}
				}

				.order-info {
					display: flex;
					border-top: 1px dashed #f1f1f1;

					& > view {
						flex: 1;
						padding: 20rpx 0;

						&:first-child {
							text-align: left;
							font-size: $ns-font-size-base;
							> text:first-child {
								margin-right: 20rpx;
							}
						}
						&:last-child {
							text-align: right;
						}
					}
				}

				.order-operating {
					padding: 20rpx 0;
					text-align: right;
					border-top: 1px dashed #f1f1f1;

					.operating-btn {
						border-radius: 6rpx;
						color: white;
						padding: 6rpx 40rpx;
						display: inline-block;
						margin-left: 20rpx;

						&.ns-bg-color-gray-shade-20 {
							background: #b7b7b7;
						}
					}
				}
			}
		}
	}
}

